<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @prev-click="handlePrevClick"
    @next-click="handleNextClick"
    :hide-on-single-page="hideOnSinglePage"
    :current-page.sync="WP_CurrentPage"
    :page-sizes="WP_PageSizes"
    :page-size="WP_PageSize"
    :layout="layout"
    :total="total"
    :pager-count="pagerCount"
    :background="true"
  >
  </el-pagination>
</template>

<script>
export default {
  props: {
    totalRow: {
      type: Number,
      default: 0
    },
    pageSizes: {
      type: Array,
      default: () => {
        return [2, 10, 20]
      }
    },
    pageSize: {
      type: Number,
      default: 5
    },
    currentPage: {
      type: Number,
      default: 5
    }
  },
  data () {
    return {
      total: this.totalRow, // 总条目数
      WP_PageSize: this.pageSize, // 每页显示条目个数
      WP_CurrentPage: this.currentPage, // 当前页数
      WP_PageSizes: this.pageSizes,
      pagerCount: 5,
      hideOnSinglePage: false, // 只有一页时是否隐藏
      layout: 'total, sizes, prev, pager, next, jumper' // 组件布局
    }
  },
  watch: {
    pageSize (nVal, oVal) {
      this.WP_PageSize = nVal
    },
    currentPage (nVal, oVal) {
      this.WP_CurrentPage = nVal
    },
    totalRow (nVal, oVal) {
      this.total = nVal
    }
  },
  methods: {
    init (param) {
      this.total = param.total || 0
      this.currentPage = Math.ceil(this.total / this.pageSize) || 1
    },
    // pageSize 改变时会触发
    handleSizeChange (val) {
      this.WP_CurrentPage = 1
      this.hideOnSinglePage = false
      this.$emit('size-change', {currentPage: this.WP_CurrentPage, pageSize: val})
    },
    // currentPage 改变时会触发
    handleCurrentChange (val) {
      this.$emit('current-change', {currentPage: val, pageSize: this.pageSize})
    },
    // 用户点击上一页按钮改变当前页后触发
    handlePrevClick (val) {
      this.$emit('prev-click', val)
    },
    // 用户点击下一页按钮改变当前页后触发
    handleNextClick (val) {
      this.$emit('next-click', val)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
